<template>
	<div class="bgc" style="overflow-y:auto;" id="body-hp">
		<HeaDer></HeaDer>
    <div class="space-around bgcc">
      <div class="left">
        <h1 style="font-size:35px">园区平台2222222222</h1>
        <h2 style="line-height:30px">为中小微企业、创业者提供导向性、专业性、实践性辅导服务优化小型微型<br/>
          企业创业新环境，支持中小企业健康发展<br/>
          一站式惠企政策信息服务</h2>
      </div>
      <div class="right">
        <div class="title">
          园区账号登录
        </div>  
        <div style="margin-top:15px">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input
                placeholder="请输入账号"
                v-model="input"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="请输入密码" 
                v-model="password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item class="flex">
              <el-input
                  placeholder="请输入验证码"
                  v-model="code"
                  style="width:250px"
                  clearable
                  >
              </el-input>
              <div @click="refreshCode()" class="code" title="点击切换验证码">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-form-item>
          </el-form>
          <el-checkbox v-model="checked" style="margin-top:-20px">我已阅读并同意《XXX企业版用户协议》</el-checkbox>
        </div>
        <el-button type="warning" plain @click="reshCode()" style="width:361px;margin-top:20px">登录</el-button><br/>
        <div class="flex space-between">
          <el-button type="text"  @click="go_zhuci" style="color:#F18047">注册</el-button>
          <el-button type="text"  @click="forgetpassword()" style="color:#F18047">忘记密码</el-button>
        </div>
      </div>
    </div>
		<FooTer></FooTer>
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import SusPension from '../../components/HomePage/suspension'
import sIdentify from '../../components/HomePage/sIdentify'
export default {
	name: "body-hp",
	data () {
		return {
      checked: true,//选项卡
      input:'',//账号
      password:'',//密码
      code:'',//验证码
      identifyCode: "",
      identifyCodes: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d'], //根据实际需求加入自己想要的字符
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
		};
	},
  components: {
		HeaDer,
		FooTer,
		SusPension,
    sIdentify
	},
	methods: {
	  // 生成随机数
    randomNum(min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 更新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      console.log('当前验证码:',this.identifyCode);
    },
    
    // 随机生成验证码字符串
    makeCode(data, len) {
      console.log('data, len:', data, len)
      for (let i = 0; i < len; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length-1)]
      }},
      //登录按钮处验证
    reshCode() {
      if (this.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
      this.$message.error('请填写正确验证码')
          this.refreshCode()
          return
        }
       this.$message.error('账号'+this.input+'密码：'+this.password)
        
      },
      // 忘记密码提示
      forgetpassword() {
        this.$message.error('忘记密码请联系系统管理员处理')

      },
      go_zhuci() {
				this.$router.push("/eplogin")
			},
    },
    mounted() {
    this.refreshCode()
 },
	created() {

	},
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
.space-around{
  display: flex;
  justify-content: space-around ;
}
.space-between{
  display: flex;
  justify-content: space-between;
}
.center{
  display: flex;
	justify-content: center;
}
.bgc{ 
	// background:url(../../assets/images/eplogin/111_02.jpg) no-repeat scroll;
  // background-size:100%;
	// width: 1920rem;
	// height: 100%;
  // .a{
  //   color:white;
  //   .b{
  //     color:white;
  //   }
  // }
}
.bgcc{ 
	background:url(../../assets/images/eplogin/111_04.jpg) no-repeat scroll;
  background-size:100%;
	width: 1920rem;
	height: 662rem;
  font-size: 14rem;
  padding:20px;
  .left{
    color:white;
    margin-top:120px;
  }
  .right{
      margin-top:60px;
      margin-bottom:50px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      background-color: #FFF1E8;
      padding:20px;
      .title{
        font-weight:bold;
        font-size: 18rem;
      }
      .code{
        cursor:pointer;
        margin-left:250px;
        margin-top:-36px;
      }
    }
}
/* 回到顶部 end*/
.body-hp{
	height:100%;
	width:100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;
	color:#676767;
}





</style>